<template>
  <div class="index">
    <div style="padding: 0.2rem 0.3rem; position: relative; background: #1989fa; height: 0.9rem;" class="flexcc">
    	<div style="position: absolute; left: 0.3rem; top: 0.2rem;"><img src="../../../static/img/1.png" style="width: 0.5rem; height: 0.5rem;"></div>
    	<div style="color: #fff;  font-weight: bold;">新建客户</div>
    </div>
    <div style="padding: 0.3rem;">
    	<van-cell-group>
    	  <van-field required v-model="all.khmc" label="客户名称" placeholder="请输入客户名称" />
    	</van-cell-group>
    	<van-cell-group>
    	  <van-field required v-model="all.dh" label="联系电话" placeholder="请输入联系电话" />
    	</van-cell-group>
    	<van-cell-group>
    	  <van-field required readonly clickable :value="all.khlx" label="客户类型" placeholder="请选择客户类型" @click="kehuleixinglog = true"/>
    	</van-cell-group>
    	<van-cell-group>
    		<van-field required readonly clickable :value="all.gjzt" label="跟进状态" placeholder="请选择跟进状态" @click="genjinzhuangtailog = true"/>
    	</van-cell-group>
    	<van-cell-group>
    		<van-field required readonly clickable :value="all.khly" label="客户来源" placeholder="请选择客户来源" @click="kehulaiyuanlog = true"/>
    	</van-cell-group>
    	<van-cell-group>
    	  <van-field required v-model="all.gsmc" label="公司名称" placeholder="请输入公司名称" />
    	</van-cell-group>
    	<van-cell-group>
    	  <van-field required readonly clickable :value="all.sshy" label="所属行业" placeholder="请选择所属行业" @click="suoshuhangyelog = true"/>
    	</van-cell-group>
    	<van-cell-group>
    	  <van-field required readonly clickable :value="all.rygm" label="人员规模" placeholder="请选择人员规模" @click="renyuanguimolog = true"/>
    	</van-cell-group>
    	<van-cell-group>
    	  <van-field required v-model="all.bz" label="备注" placeholder="请输入备注" />
    	</van-cell-group>
    	<div @click="zhankai = !zhankai" style="color: #1989fa; margin: 10px 0;" class="flexc">展开更多信息 <van-icon name="arrow-down" style="margin-left: 10px;" /></div>
    	<div v-if="zhankai">
    		<van-cell-group>
    		  <van-field v-model="all.cz" label="传真" placeholder="请输入传真" />
    		</van-cell-group>
    		<van-cell-group>
    		  <van-field v-model="all.wz" label="官网" placeholder="请输入官网" />
    		</van-cell-group>
    		<van-cell-group>
    		  <van-field v-model="all.yb" label="邮编" placeholder="请输入邮编" />
    		</van-cell-group>
    		<van-cell-group>
    		  <van-field v-model="all.dz" label="详细地址" placeholder="请输入详细地址" />
    		</van-cell-group>
    	</div>
    	<div class="flexcc" style="margin-top: 0.3rem;">
    		<van-button type="info" size="normal" @click="baocun">保存并提交审核</van-button>
    	</div>

    </div>

    <van-popup v-model="kehuleixinglog" position="bottom">
    	<van-picker title="请选择客户类型" show-toolbar :columns="kehuleixing"  @confirm="sexConfirm" @cancel="sexCancel" />
    </van-popup>

    <van-popup v-model="genjinzhuangtailog" position="bottom">
    	<van-picker title="请选择跟进状态" show-toolbar :columns="genjinzhuangtai"  @confirm="genjinConfirm" @cancel="genjinCancel"/>
    </van-popup>

    <van-popup v-model="kehulaiyuanlog" position="bottom">
    	<van-picker title="请选择客户来源" show-toolbar :columns="kehulaiyuan" @confirm="laiyuanConfirm" @cancel="laiyuanCancel" />
    </van-popup>
    <van-popup v-model="renyuanguimolog" position="bottom">
    	<van-picker title="请选择人员规模" show-toolbar :columns="renyuanguimo"  @confirm="guimoConfirm" @cancel="guimoCancel" />
    </van-popup>
    <van-popup v-model="suoshuhangyelog" position="bottom">
    	<van-picker title="请选择所属行业" show-toolbar :columns="suoshuhangye"  @confirm="hangyeConfirm" @cancel="hangyeCancel" />
    </van-popup>

  </div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'index',
		data() {
			return {
         all:{
            "id": "",
            "gsmc": "",
            "dh": "",
            "cz": "",
            "wz": "",
            "dz": "",
            "yb": "",
            "khlx": "",
            "khmc": "",
            "gjzt": "",
            "khly": "",
            "sshy": "",
            "rygm": "",
            "bz": "",
            fzrid:JSON.parse(localStorage.getItem('person')).userid,
        },
         zhankai:false,
         kehuleixing:['重要客户','普通客户','低价值客户'],
         kehuleixinglog:false,
         genjinzhuangtai:['初访','意向','报价','成交','搁置','未成交','无意向','长期服务'],
         genjinzhuangtailog:false,
         kehulaiyuan:['主动拜访','公海','转介绍','展会','网络','其他'],
         kehulaiyuanlog:false,
         suoshuhangye:['金融','服务','事业单位'],
         suoshuhangyelog:false,
         renyuanguimo:['10-20人','20-50人','50-100人','100-500人','500人以上'],
         renyuanguimolog:false
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {
      baocun:function(){
        axios.post('/Customer/addCustomer',this.all).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('新建客户成功');
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      sexConfirm:function(val){
        this.all.khlx = val
      	this.kehuleixinglog = false
      },
      sexCancel:function(val){
        this.kehuleixinglog = false
      },

      genjinConfirm:function(val){
      	this.all.gjzt = val
      	this.genjinzhuangtailog = false
      },
      genjinCancel:function(val){
      	this.genjinzhuangtailog = false
      },

      laiyuanConfirm:function(val){
        this.all.khly = val
        this.kehulaiyuanlog = false
      },
      laiyuanCancel:function(val){
      	this.kehulaiyuanlog = false
      },

      hangyeConfirm:function(val){
      	this.all.sshy = val
      	this.suoshuhangyelog = false
      },
      hangyeCancel:function(val){
      	this.suoshuhangyelog = false
      },

      guimoConfirm:function(val){
      	this.all.rygm = val
      	this.renyuanguimolog = false
      },
      guimoCancel:function(val){
      	this.renyuanguimolog = false
      }
		}
	}
</script>

<style scoped lang="less">
  .index {
    background: #fff;
    min-height: 100vh;
    width: 100vw;
    padding: 0.3rem;
    font-size: 0.25rem;

    img {
      max-width: 100%;
      display: block;
    }

    .flex {
      display: flex;
    }

    .flexc {
      display: flex;
      align-items: center;
    }

    .flexbc {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .yy {
      box-shadow: 0 0 0.1rem #eaeaea;
      padding: 0.2rem 0.3rem;
      margin-bottom: 0.3rem;
    }

    .act {
      background: #ccc !important;
      color: #FFFFFF;
      padding: 0.1rem 0.2rem;
      border-radius: 0.1rem;
    }

    .act1 {
      background: #fff;
      box-shadow: 0 0 0.1rem #eaeaea;
      padding: 0.1rem 0.2rem;
      margin-left: 0.2rem;
      border-radius: 0.1rem;
    }
  }
</style>
